<template>
  <view ref="tmspin" :class="[customClass]" :style="[customCSSStyle]" class="flex relative flex-col">
    <view class="relative zIndex-1">
      <slot></slot>
    </view>
    <view
      v-if="loadingComputed"
      class="absolute zIndex-10 flex-center blur"
      :class="[css_is_nvue ? '' : ' fulled-height   ']"
      :style="[
        css_is_nvue ? '' : { width: '100%' },
        { backgroundColor: bgColorComputed },
        css_is_nvue
          ? {
              width: (css_nvue_size[0] || props.fontSize) + 'px',
              height: (css_nvue_size[1] || props.fontSize) + 'px',
            }
          : '',
      ]"
      @click.stop="clickMask"
    >
      <view :user-interaction-enabled="false" class="pa-10 flex-col flex-col-center-center">
        <tm-icon
          spin
          :font-size="props.size"
          :dark="isDark"
          :color="_color"
          :follow-dark="followDark"
          :follow-theme="props.followTheme"
          :name="props.icon"
        ></tm-icon>
        <tm-text
          :follow-theme="props.followTheme"
          :dark="isDark"
          :follow-dark="followDark"
          :color="_color"
          _class="mt-16"
          :label="props.tip"
        ></tm-text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 局部加载
 * @description 放置在其里面的所有内容，加载状态时，会在其中所有内容上添加遮罩模糊加载页面，并且不可操作。
 */

import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'

import {
  getCurrentInstance,
  computed,
  ref,
  provide,
  inject,
  onMounted,
  onUnmounted,
  onUpdated,
  nextTick,
  watch,
} from 'vue'
import { cssstyle, tmVuetify } from '../../tool/lib/interface'
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs'

import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore()

// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
// 混淆props共有参数
const props = defineProps({
  ...custom_props,
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  color: {
    type: String,
    default: 'primary',
  },
  icon: {
    type: String,
    default: 'tmicon-shuaxin',
  },
  size: {
    type: Number,
    default: 46,
  },
  bgColor: {
    type: String,
    default: 'rgba(255,255,255,0.9)',
  },
  tip: {
    type: [String],
    defalut: '',
  },
  load: {
    type: [Boolean, String],
    default: false,
  },
})
const emits = defineEmits(['click'])
const proxy = getCurrentInstance()?.proxy ?? null
// 设置响应式全局组件库配置表。
const tmcfg = computed<tmVuetify>(() => store.tmStore)
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props))
//自定类
const customClass = computed(() => computedClass(props))
//是否暗黑模式。
const isDark = computed(() => computedDark(props, tmcfg.value))
//计算主题
// const tmcomputed = computed<cssstyle>(() => computedTheme(props, isDark.value));
// 点击文字事件。
function clickhandle(e: Event): void {
  emits('click', e)
}
const css_is_nvue = ref(true)
// #ifndef APP-NVUE
css_is_nvue.value = false
// #endif
const css_nvue_size = ref([0, 0])
const bgColorComputed = computed(() => (isDark.value ? 'rgba(0,0,0,0.9)' : props.bgColor))
const loadingComputed = computed(() => props.load)
const _color = computed(() => props.color)
onUpdated(() => {
  // #ifdef APP-PLUS-NVUE
  nvuegetClientRect()
  // #endif
})
onMounted(() => {
  // #ifdef APP-PLUS-NVUE
  nvuegetClientRect()
  // #endif
})
function nvuegetClientRect() {
  // #ifdef APP-PLUS-NVUE
  nextTick(function () {
    dom.getComponentRect(proxy.$refs.tmspin, function (res) {
      if (res?.size) {
        css_nvue_size.value = [res.size.width, res.size.height]
        if (res.size.height == 0) {
          nvuegetClientRect()
        }
      }
    })
  })
  // #endif
}
function clickMask(e) {
  // #ifdef APP-PLUS-NVUE
  e.stopPropagation()
  // #endif
  emits('click', e)
}
</script>

<style></style>
